import {createStyles, Theme, withStyles} from "@material-ui/core/styles";
import {WithStyles} from "@material-ui/core/styles/withStyles";
import * as React from "react";

const styles = (theme: Theme) =>
    createStyles({
        root: {
            height: "80%",
            display: "inline",
            paddingRight: "10px"
        },
        image: {
            height: "32px",
            width: "32px",
            verticalAlign: "sub"
        },
        fontCss: {
            display: "inline-block",
            "& p": {
                fontSize: "10px",
                marginBottom: "0px",
                marginLeft: "15px"
            }
        }
    });

interface Iprops extends WithStyles<typeof styles> {
    image: string;
    messageTop?: string;
    messageButtom?: string;
}

class InformationMessage extends React.Component<Iprops> {
    public render() {
        const {classes} = this.props;
        return (
            <div className={classes.root}>
                <img src={this.props.image} className={classes.image}/>
                <div className={classes.fontCss}>
                    <p>{this.props.messageTop}</p>
                    <p>{this.props.messageButtom}</p>
                </div>
            </div>
        );
    }
}

export default withStyles(styles)(InformationMessage);
